<style lang="scss" scoped>
@import "@/assets/css/variable";
.applyForm {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 1.6rem;
  .box1 {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .line {
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      span {
        flex: 1;
      }
    }
  }
  .box2 {
    background-color: white;
    .line {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .title {
      font-size: 1.4rem;
      font-weight: bold;
    }
  }
}
</style>
<template>
  <div class="applyForm">
    <div class="box1 padding-all-m border-r-l" v-if="item">
      <div class="title title-l">{{ item.title }}</div>
      <div class="line margT-l">
        <span class="label color-s">商户名称</span
        ><span class="value">{{ item.merchantname }}</span>
      </div>
      <div class="line margT-l">
        <span class="label color-s">费用</span
        ><span class="value" :style="{ color: theme_color }"
          >{{ `0` }}元</span
        >
      </div>
    </div>
    <div class="box2 padding-all-m border-r-l margT-l" v-if="item">
      <div>
        <span class="title">优惠券信息</span
        ><span class="color-s fs-12 margL-l"
          >以下均为<span :style="{ color: theme_color }">必填</span></span
        >
      </div>
      <div>
        <div class="margT-l" v-if="item.create_form">
          <k-form-build ref="kfb" :value="item.create_form" />
        </div>
      </div>
    </div>
    <div class="fix-bottom padding-lr">
      <van-button :color="theme_color" block @click="submit">提交</van-button>
    </div>
    <!-- <div style="">openId:{{openid}}</div> -->
    <!-- <div>openId2:{{openId2}}</div> -->
  </div>
</template>

<script>
import {Button,Toast,Dialog} from 'vant'
// import Vue from 'vue'
import KFormDesign from 'k-form-design';
// import 'k-form-design/lib/k-form-design.css';
Vue.use(KFormDesign);
// import utils from '@/assets/js/utils.js';

export default {
  name: "ApplyForms",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    KFormDesign,
  },
  data() {
    return {
      item: "",
      openid: "",
      orderItem: "",
      theme_color: "",
      val: {},
      activity_id: null,
      falg: true,
      id: null,
      staff_id: null,
      model_num: null
    };
  },
  created() {
    console.log();
    this.theme_color = this.$route.hash;
    // const a = $('.fix-bottom')
    // console.log('a',a)
  },
  // computed: {
  //     getOpenId() {
  //         this.openid = this.$store.state.openid
  //         return this.openid
  //     }
  // },
  mounted() {
    const _this = this;
    this.item = this.$store.getters.getActivityItem;
    console.log(this.item, 'item');
    // console.log(this.item , 'this.item ');
    this.orderItem = this.$store.state.orderItem;
    this.theme_color = this.$store.state.theme_color;
    this.activity_id = this.$route.query.activity_id;
    this.model_num = _this.$route.query.model_num;
    this.staff_id = _this.$route.query.staff_id;
    this.id = this.$route.query.id;
    this.val = this.item.val;
    if (!this.item || !this.orderItem) {
      this.$router.go(-1);
    }
    if (process.env.NODE_ENV == "production") {
      _this.openid = localStorage.getItem("COPENID");
    } else {
      _this.openid = _this.$store.state.openid;
    }
    if (!_this.openid || _this.openid == "undefined") {
      this.$router.go(-1);
    }
  },
  methods: {
    submit() {
      const _this = this;
      _this.$refs.kfb
        .getData()
        .then((values) => {
          console.log("验证通过", values);
          // values.create_time = utils.formatDateYMDHM(new Date())
          // values.openid = _this.openid
          // values.is_sure = 0
          let apply_list = []; // this.orderItem.val
          apply_list.push(values);
          _this.getOrderSave(apply_list);
        })
        .catch(() => {
          console.log("验证未通过，获取失败");
        });
    },
    getOrderSave(apply_list) {
        let params = {
          title: this.item.title,
          activity_id: this.activity_id, // 活动ID
          val: JSON.stringify(apply_list), // 自定义表单数据
          openid: this.openid,
          id: this.id,
          coupon_id: this.item.coupon.id,
          // id: _this.item.id,// 修改的时候需要传
          // apply_list: apply_list
        };
        this.$request.CouponFans(params).then(res => {
          Toast("领取成功");
          this.$router.go(-1);
        })
      }
    },
    activitySave(apply_list) {
      const _this = this;
      let params = {
        openid: _this.openid,
        id: _this.item.id,
        apply_list: apply_list,
      };
      console.log("params", params);
      this.$request
        .activitySave(params)
        .then((res) => {
          if (res.ret == 200) {
            Toast("操作成功");
            setTimeout(function () {
              _this.$router.go(-1);
            }, 2000);
          }
        })
        .catch((res) => {
          Toast("出错了");
        });
    },
};
</script>